<template>
    <div class="left-nav">
        <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                menu-trigger="true"
                :style={height:leftHeight}
                unique-opened
                router>
            <template v-for="item,index in TreeData">
                <el-menu-item v-if="!item.child" test="1" :index="item.url">
                    <i class="fa icon" :class=item.icon></i>
                    <span>{{item.name}}</span>
                </el-menu-item>
                <el-submenu :index="(index+1).toString()"  v-if="item.child">
                    <template slot="title">
                        <i class="fa icon" :class=item.icon></i>
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item-group v-if="item.child" v-for="childItem in item.child">
                        <el-menu-item :index="childItem.url">{{childItem.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </template>
        </el-menu>
 <!--       <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                menu-trigger="true"
                :style={height:leftHeight}
                unique-opened
                router>
            &lt;!&ndash;<el-menu-item index="/index">&ndash;&gt;
                &lt;!&ndash;<i class="el-icon-location-outline"></i>&ndash;&gt;
                &lt;!&ndash;<span slot="title">首页</span>&ndash;&gt;
            &lt;!&ndash;</el-menu-item>&ndash;&gt;
            <el-menu-item index="/swipe/management">
                <i class="el-icon-star-on"></i>
                <span slot="title">轮播图管理</span>
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-news"></i>
                    <span>内容管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/curriculum/content">课程内容</el-menu-item>
                    <el-menu-item index="/file/content">文件内容</el-menu-item>
                    <el-menu-item index="/zixun/content">资讯内容</el-menu-item>
                    <el-menu-item index="/problem/content">疑难问题</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-news"></i>
                    <span>类型管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/kecheng/type">课程类型</el-menu-item>
                    <el-menu-item index="/file/type">文件类型</el-menu-item>
                    <el-menu-item index="/zixun/type">资讯类型</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/user/management">
                <i class="el-icon-star-on"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
        </el-menu>-->
    </div>


</template>

<script>
    export default {
        name: 'leftNav',
        data() {
            return {
                leftHeight: '',
                TreeData: []
            }
        },
        filters: {
            toJson: function (tab) {
                return JSON.stringify(tab);
            }
        },
        created() {
          this.getTreeList();
        },
        mounted() {
            this.leftHeight = (document.documentElement.clientHeight - 65) + 'px';
        },
        methods: {
            getTreeList() {
                this.$http.get('api/admin/admin/navTree')
                    .then((result) => {
                        this.TreeData = result.data;
                    })
                    .catch((err) => {
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            }
        }
    };
</script>

<style scoped>
    a {
        text-decoraction: none;
    }
</style>